﻿<%@ Page Language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"
    meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server"><SharePoint:FieldValue id="PageTitle" FieldName="Title" runat="server" /></asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server"><SharePoint:FieldValue FieldName="Title" runat="server"/></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server" />
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server" />
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server" />

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    
    <PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
		<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>"
			After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
	</PublishingWebControls:EditModePanel>
    
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
    <SharePoint:CssRegistration Name="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" After="corev4.css" runat="server" />

    <script type="text/javascript">
        //for reference, http://kyleschaeffer.com/sharepoint/wp-tabify/
        //              http://jqueryui.com/tabs/
        //  > for this script to work properly, the proper css classes and styles should be included.

        (function (jQuery) {
            jQuery.fn.wpTabify = function () {

                // if we're not in edit mode
                if (jQuery('.ms-WPAddButton').size() == 0) {
        
                    // for each 
                    this.each(function (i) {
        
                        // create variables needed for assembling tabs within this web part zone
                        var idName = jQuery(this).attr('id');
                        var tabList = jQuery('<ul class="wpt-ui-tabs-nav"/>');
                        var panels = jQuery('<div class="wpt-ui-tabs-wrapper"/>');
        
                        // for each web part in the web part zone, assemble the tab headers and tab content in the format JQuery UI tabs() method expects.
                        jQuery(this).find('.s4-wpTopTable,td[id^="MSOZoneCell_"] > table').each(function (j) {
                            jQuery(tabList).append('<li><a href="#ui-tab-panel' + idName + i + j + '"><span>' + jQuery(this).find('h3.ms-WPTitle').text() + '</span></a></li>');
                            var thisPanel = jQuery('<div id="ui-tab-panel' + idName + i + j + '" class="wpt-ui-tabs-panel"/>');
                            var panelContents = jQuery(this).detach();
                            jQuery(thisPanel).append(jQuery(panelContents).find('.ms-wpContentDivSpace'));
                            jQuery(panels).append(thisPanel);
                        });
        
                        // if we created any tabs, then push the new tabs structure back into the DOM, then call the jquery ui method .tabs()
                        if (jQuery(tabList).find('li').size() > 0) {
                            jQuery(this).prepend(panels);
                            jQuery(this).prepend(tabList);
                            jQuery(this).tabs();
                        }
        
                        // remove original webpart zone now that we've tabified what we wanted out of it
                        //jQuery(this).find('div.ms-webpart-zone').remove();
                    });
                }
            };
        })(jQuery);

        function TabifyFnWrapper() {
            // tabify the appropriate web part zone for this page layout
            jQuery('#TabbedWebPartZoneWrapper').wpTabify();
        
            //regardless of the tabify result, display the web part zone
            jQuery('#TabbedWebPartZoneWrapper').css('display', 'inline-block');
        }
        
        // add to sharepoint javascript function queue to be called after page load
        _spBodyOnLoadFunctionNames.push('TabifyFnWrapper');

    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel title-edit">
		<SharePoint:TextField runat="server" FieldName="Title"/>
	</PublishingWebControls:EditModePanel>
    
    <div id="TabbedWebPartZoneWrapper" style="display:none;">
        <!-- note, the wrapper around the tabbed web part zone is initally hidden so 
            users don't see the shifting around while the tabs are being assembled -->
        <WebPartPages:WebPartZone runat="server" Title="Tabbed Web Part Zone" ID="TabbedWebPartZone"  />
    </div>

    <div id="PublishingContentZoneWrapper">
        <!-- you can still have 1 or more publishing content zones on the page -->
        <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" runat="server"/>
    </div>

    <div id="NonTabbedWebPartZoneWrapper">
        <!-- you can still have normal non-tabbed web part zones also on the page -->
        <WebPartPages:WebPartZone runat="server" Title="Non Tabbed Web Part Zone" ID="NonTabbedWebPartZone" />
    </div>
    
</asp:Content>
